<template>
    <div class="pic-wrap">
        <div class="upload-wrap">
            <input type="file" @change="upload" />
            <div class="bj">+</div>
        </div>
        <ul class="pic-list">
            <li v-for="(i, index) in files" :key="i.id">
                <img :src="i.id" alt="" />
                <div class="icon-wrap">
                    <div>
                        <el-icon @click="amplify(i.id)"><ZoomIn /></el-icon>
                        &nbsp;
                        <el-icon><Delete @click="del(index)" /></el-icon>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div ref="wrap" class="big-img-wrap" @click="disappear">
        <div class="big-img">
            <img ref="bigImg" src="" alt="" />
        </div>
    </div>
    <div class="text">
        <div class="title">
            <span>文章标题:</span>
            <input type="text" v-model="title" name="" id="" />
        </div>
        <div class="content">
            <p><span>内容</span><el-button @click="publish" color="#8076a3">发布</el-button></p>
            <textarea ref="text" v-model="texts"></textarea>
        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref, reactive, getCurrentInstance } from "vue";
import { Delete, ZoomIn } from "@element-plus/icons-vue";
import { uploadsApi, upEssay, getUserData } from "../api/index";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let store = useStore();
let router = useRouter();
let userName = ref("");
let userId = ref("");
// 从cookie获取用户账号并请求用户所有信息
onMounted(() => {
    let getUser = async () => {
        if (document.cookie) {
            let arr = document.cookie.split("; ");
            let obj = {};
            arr.forEach((item) => {
                let keyName = item.split("=")[0];
                let keyVal = item.split("=")[1];
                obj[keyName] = keyVal;
            });
            if (obj.userAccount) {
                await axios(getUserData(obj.userAccount)).then(({ data }) => {
                    store.commit("setUserData", data[0]);
                    userName.value = store.state.userData.passname;
                    // userAccount = store.state.userData.account;
                    userId.value = store.state.userData.id;
                    console.log(store.state.userData);
                });
            } else {
                router.push({ name: "loginRegistration" });
                ElMessage.error("请先登录");
            }
        } else {
            router.push({ name: "loginRegistration" });
            ElMessage.error("请先登录");
        }
    };
    getUser();
});
let title = ref("");
let texts = ref("");
let files = reactive([]);
let vm = getCurrentInstance();
let upload = (event) => {
    if (files.length >= 6) {
        ElMessage.error("最多只能上传6张图片哦！");
        return;
    }
    let fileInfo = event.target.files[0];
    if (fileInfo.type.split("/")[0] == "image") {
        let suffix = fileInfo.name.split(".")[1];
        if (suffix == "jpg" || suffix == "png" || suffix == "gif" || suffix == "jpeg" || suffix == "webp") {
            let fli = new FileReader();
            fli.readAsDataURL(event.target.files[0]);
            fli.onload = function () {
                files.push({ id: this.result, fileInfo });
            };
        } else {
            ElMessage.error("暂不支持该格式的文件");
            ElMessage.error("请上传jpg,png,gif,jpeg,webp格式的图片");
        }
    } else {
        ElMessage.error("选择的文件不是图片");
    }
};
let amplify = (i) => {
    vm.refs.bigImg.src = i;
    vm.refs.wrap.style.display = " block";
};
let disappear = () => {
    vm.refs.wrap.style.display = " none";
};
let del = (i) => {
    files.splice(i, 1);
};

let publish = () => {
    if (!title.value) {
        ElMessage.error("标题不能为空！！");
        return;
    }
    if (!texts.value) {
        ElMessage.error("标题不能为空！！");
        return;
    }
    let pic = "";
    if (files.length > 0) {
        pic = [];
        files.forEach((i) => {
            let formData = new FormData();
            formData.append("file", i.fileInfo);
            axios
                .post(uploadsApi(), formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(({ data }) => {
                    pic.push(data.src);
                });
        });
    }
    let stype;
    if (pic) {
        stype = 2;
    } else {
        stype = 7;
    }
    setTimeout(() => {
        axios
            .post(upEssay(), {
                title: title.value,
                content: texts.value,
                author: userName.value,
                authorId: userId.value,
                pic,
                s: 1,
                etype: 0,
                stype,
            })
            .then(({ data }) => {
                if (data.s == 200) {
                    ElMessage({
                        message: data.m,
                        type: "success",
                    });
                    setTimeout(() => {
                        location.reload(true);
                    }, 500);
                } else {
                    ElMessage.error(data.m);
                }
            });
    }, 500);
};
</script>

<style lang="scss" scoped>
.pic-wrap {
    display: flex;
    .upload-wrap {
        width: 9.375rem;
        height: 9.375rem;
        border: 1px dotted #ccc;
        position: relative;
        border-radius: 0.625rem;
        overflow: hidden;
        margin-right: 1.875rem;
        input {
            position: absolute;
            z-index: 999;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .bj {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 9.375rem;
            font-size: 3rem;
            color: #ccc;
        }
    }
    ul {
        width: 1000px;
        display: flex;
        li {
            margin-right: 0.3125rem;
            width: 9.375rem;
            height: 9.375rem;
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 0.625rem;
            overflow: hidden;
            position: relative;
            .icon-wrap {
                color: #ccc;
                position: absolute;
                width: 100%;
                height: 100%;
                line-height: 9.375rem;
                text-align: center;
                display: none;
                background-color: rgba($color: #000000, $alpha: 0.4);
            }
            &:hover .icon-wrap {
                display: block;
            }
        }
        img {
            width: 9.375rem;
        }
    }
}
.big-img-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    .big-img {
        width: 500px;
        height: 500px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 20px;
        overflow: hidden;
        img {
            width: 100%;
            margin-top: 30px;
        }
    }
}
.text {
    margin-top: 1.875rem;
    width: 100%;
    height: 18.75rem;
    padding: 0.625rem;
    box-sizing: border-box;
    .title {
        font-size: 24px;
        input {
            width: auto;
            font-size: 24px;
            margin-left: 0.625rem;
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: 1px solid #ccc;
            outline: none;
        }
    }
    .content {
        p {
            margin: 0.625rem 0;
            display: flex;
            height: 2rem;
            justify-content: space-between;
        }
        textarea {
            width: 100%;
            height: 12.5rem;
            border: 1px solid #ccc;
            outline: none;
            resize: none;
        }
    }
}
</style>
